<template>
    <div class="mymap">
        <div id="map">
            <div id="container"></div> 
        </div>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  		securityJsCode: '5be626de8ab782abd2be7261d6cb69aa'
	}
export default {
    data() {
        return {
            map: null
        }
    },
      mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap()
  },

    methods:{
    initMap(){
        AMapLoader.load({
            key:"188b24f20bf3348860d77a2273d3e4d1",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.InfoWindow']      // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            this.map = new AMap.Map("container",{  //设置地图容器id
                viewMode:"3D",    //是否为3D地图模式
                zoom:21,           //初始化地图级别
                center:[113.32774,23.140709], //初始化地图中心点位置
               
            });
            var trafficLayer = new AMap.TileLayer.Traffic({
                zIndex: 1
            });
            this.map.add(trafficLayer);//添加图层到地图
            // 点标记
           var marker = new AMap.Marker({
                icon: require('../assets/img/lxzb-ditu.png'), // 自定义点标记
                position: [113.32774,23.140709], // 基点位置
                offset: new AMap.Pixel(0,0), // 设置点标记偏移量
                anchor:'bottom-left', // 设置锚点方位
            });

            this.map.add(marker);
            
            // 信息窗体的内容
            var content = [
                `<div class="xinxi">
                        我在这里
                </div>`
            ]
            // 创建 infoWindow 实例	
            var infoWindow = new AMap.InfoWindow({
                content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
            });
            
            // 打开信息窗体
            infoWindow.open(this.map,[113.32774,23.140709]);

        }).catch(e=>{
            console.log(e);
        })
    },
},


}
</script>



<style lang="scss" scoped>
#map {
    #container {
        width:100%;
        height:400px;
        

        :deep .xinxi{
            width: 130px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 20px;
            background-color: #fff;
            border: 2px solid #f6921b;
            position: relative;
            color: #f7941c;
        }
        :deep .xinxi::before {
            content: "";
            position: absolute;
            bottom: -.55em;
            left: 45%;
            padding: .35em;
            background: inherit;
            border: inherit;
            border-right: 0;
            border-bottom: 0;
            transform: rotate(-135deg);
        }
    }
}

</style>
